<template>
  <div class="online-box">
    <el-form label-width="80px" :inline="true">
      <el-form-item label="学校名称">
        <el-input
          v-model="search.name"
          @keyup.enter.native="onSubmit"
          placeholder="请输入学校名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="select-box clearfix">
      <div class="select-box-left">
        <div style="overflow-y: auto">
          <el-tabs
            v-model="activeName"
            tab-position="left"
            style="height: 400px;"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="(school, sIndex) in schoolList"
              :name="school.schoolId + ''"
              :key="school.schoolId"
              :label="school.name"
            >
              <el-checkbox
                :indeterminate="school.isIndeterminate"
                v-model="school.isCheck"
                @change="checkTitle(school.isCheck, null, sIndex)"
                >全选</el-checkbox
              >
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group
                style="padding-left: 20px;"
                v-model="school.checkedData"
                @change="checkItem(school.checkedData, null, sIndex)"
              >
                <el-checkbox
                  v-for="grade in school.gradeList"
                  :label="grade.id"
                  :key="grade.id"
                  >{{
                    `${grade.realName}(${grade.gradeList.join('、')} ${
                      grade.subject
                    })`
                  }}</el-checkbox
                >
              </el-checkbox-group>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="footer-box">
      <el-button @click="cancelFn">取 消</el-button>
      <el-button type="primary" @click="submitFn">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { ossUpload, tableUpdate } from '@/api/api.js'
import { addPrincipalInfo } from '@/api/user.js'
import { getSchoolList, getTeacherList } from '@/api/launch'
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    selectEnums: {
      type: Object,
      default: function () {
        return {}
      }
    },
    masterId: '',
    schoolId: ''
  },
  watch: {
    // masterId(val, oldval) {
    //   this.isMasterShow = !!val;
    // },
  },
  data () {
    return {
      activeName: '',
      schoolList: [],
      search: {
        name: ''
      },
      gradeList: []
    }
  },
  async created () {
    await this.getSchoolList()
  },
  methods: {
    async getSchoolList () {
      const schoolList = await getSchoolList({
        page: 1,
        pageSize: 999,
        schoolName: this.search.name
      })
      schoolList[1].data.map(item => {
        item.gradeList = []
        item.isIndeterminate = true
        item.isCheck = false
        item.checkedData = []
      })
      this.schoolList = schoolList[1].data
      this.activeName = schoolList[1].data[0].schoolId + ''
      this.getGradeList(schoolList[1].data[0].schoolId)
    },
    async getGradeList (schoolId) {
      const _index = this.schoolList.findIndex(
        item => item.schoolId == schoolId
      )
      console.log('this.schoolList[_index]', this.schoolList[_index])
      if (!this.schoolList[_index].gradeList.length) {
        const gradeList = await getTeacherList({ schoolId })
        this.$nextTick(() => {
          this.schoolList[_index].gradeList = gradeList[1].data
        })
      }
    },
    async handleClick (tab, event) {
      console.log(tab, event, this.activeName)
      this.getGradeList(this.activeName)
    },
    checkItem (val, index, sIndex) {
      console.log('item =>>', val, index)
      let checkedCount = val.length
      this.schoolList[sIndex].isCheck =
        checkedCount === this.schoolList[sIndex].gradeList.length
      this.schoolList[sIndex].isIndeterminate =
        checkedCount > 0 &&
        checkedCount < this.schoolList[sIndex].gradeList.length
      console.log(this.schoolList[sIndex])
    },
    checkTitle (val, index, sIndex) {
      console.log('title =>>', val, index)
      let arr = []
      const re = this.schoolList[sIndex].gradeList
      // 全选
      if (val) {
        for (let i = 0; i < re.length; i++) {
          arr[i] = re[i]['id']
        }
      }
      this.schoolList[sIndex].checkedData = arr
      this.schoolList[sIndex].isIndeterminate = false
    },
    onSubmit () {
      console.log(this.search)
      this.getSchoolList()
    },
    submitFn () {
      this.$emit('change', this.schoolList)
    },
    cancelFn () {
      this.$emit('cancel')
    },
    async uploadMasterImg (e) {
      let formData = new FormData()
      formData.append('file', e.file)
      let res = await ossUpload(formData, 'MASTER_PORTRAIT')
      if (res[0]) {
        return
      }
      this.schoolMaster.headUrl = res[1].data.url
    },
    beforeMasterAvatarUpload (file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式或 GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style scoped>
.el-checkbox {
  margin-left: 30px;
}
.el-tab-pane {
  overflow-y: auto;
  height: 400px;
}
.footer-box {
  margin-top: 20px;
  text-align: right;
}
/deep/ .el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable {
    padding: 0 !important;
}
/deep/ .el-tabs--left .el-tabs__nav-scroll {
  overflow-y: auto;
}
/deep/ .el-tabs__nav.is-left {
  transform: initial !important;
}
/deep/ .el-tabs__nav-prev, .el-tabs__nav-next {
  display: none !important;
}
</style>
